<div class="p-3 bg-white"><h1 class="h3 m-0">List & Wells</h1></div>
<div class="p-3 relative row-alt">
  <div class="row">
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">Basic</div>
      <div class="b-white bg-white rad-3">
        <ul class="list-unstyled">
          <li> Bug is in the SQL update file.</li>
          <li> 'Clients' database fix</li>
          <li> Write a documentation</li>
          <li> Fix the Server #13 CPU problem</li>
          <li> Write Hank for information</li>
          <li> Fix the UI dashboard</li>
        </ul>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">Advanced</div>
      <div class="b-white bg-white rad-3 list-sm">
        <ul class="list-unstyled">
          <li class="active"><a><span class="tag tag-danger">critical</span>Bug is in the SQL update file.</a></li>
          <li class="active"><a><span class="tag tag-danger">critical</span>'Clients' database fix</a></li>
          <li class="active"><a><span class="tag tag-danger">high</span> Write a documentation</a></li>
          <li><a><span class="tag tag-info">normal</span> Fix the Server #13 CPU problem</a></li>
          <li><a><span class="tag tag-default">low</span> Write Hank for information</a></li>
          <li><a><span class="tag tag-default">low</span> Fix the UI dashboard</a></li>
          <li><a><span class="tag tag-default">low</span> Repair the database indexes</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">With image</div>
      <div class="b-white bg-white rad-3 list-sm">
        <ul class="list-unstyled scrollable with-image m-0 b-0 font-xs">
          <li class="active">
            <img src="/static/img/avatar5.jpg" class="rounded-circle thumb-xxs">
            <div class="d-inline-block">
              <div>
                <strong>Jesse Holmes</strong>
                <span class="ml-auto time">Now</span>
              </div>
              <div>Lorem ipsum dolor sit amet</div>
            </div>
          </li>
          <li>
            <img src="/static/img/avatar4.jpg" class="rounded-circle thumb-xxs">
            <div>
              <div>
                <strong>Greg Abraham</strong>
                <span class="time">20 mins</span>
              </div>
              <div> Please send me an email about the task</div>
            </div>
          </li>
          <li>
            <img src="/static/img/avatar5.jpg" class="rounded-circle thumb-xxs">
            <div>
              <div>
                <strong>Rick Nevada</strong>
                <span class="time">1 hour</span>
              </div>
              <div>Ok, the problem is solved. Thank You!</div>
            </div>
          </li>
          <li>
            <img src="/static/img/avatar4.jpg" class="rounded-circle thumb-xxs">
            <div>
              <div>
                <strong>Dexter Minas</strong>
                <span class="time">12 hour</span>
              </div>
              <div>Hello, nice to see you yesterday.</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">List</div>
      <div class="b-white bg-white rad-3">
        <ul class="list-group b-0">
          <li class="list-group-item flex-column align-items-start">
            <div><strong>AngularJS</strong></div>
            <div class="text-muted font-sm w-100"> Jesse Holmes <span class="font-xs float-right">Today</span>
            </div>
          </li>
          <li class="list-group-item flex-column align-items-start">
            <div><strong>BackboneJS</strong></div>
            <div class="text-muted font-sm w-100"> Greg Abraham <span class="font-xs float-right">Yesterday</span></div>
          </li>
          <li class="list-group-item flex-column align-items-start">
            <div><strong>EmberJS</strong></div>
            <div class="text-muted font-sm w-100"> Walter White <span class="font-xs float-right">Tuesday</span></div>
          </li>
          <li class="list-group-item flex-column align-items-start">
            <div><strong>KnockoutJS</strong></div>
            <div class="text-muted font-sm w-100"> Walter White <span class="font-xs float-right">Tuesday</span></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">List selected</div>
      <div class="b-white bg-white rad-3">
        <ul class="list-group b-0">
          <li class="list-group-item">
            <div><strong>AngularJS</strong></div>
            <div class="text-muted font-sm w-100"> Jesse Holmes <span class="font-xs float-right">Today</span></div>
          </li>
          <li class="list-group-item active">
            <div><strong>BackboneJS</strong></div>
            <div class="text-muted font-sm w-100"> Greg Abraham <span class="font-xs float-right">Yesterday</span></div>
          </li>
          <li class="list-group-item">
            <div><strong>EmberJS</strong></div>
            <div class="text-muted font-sm w-100"> Walter White <span class="font-xs float-right">Tuesday</span></div>
          </li>
          <li class="list-group-item">
            <div><strong>KnockoutJS</strong></div>
            <div class="text-muted font-sm w-100"> Walter White <span class="font-xs float-right">Tuesday</span></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">List border</div>
      <div class="b-white bg-white rad-3">
        <ul class="list-group b-0">
          <li class="list-group-item status status-danger">
            <div><strong>AngularJS</strong></div>
            <div class="text-muted font-sm w-100"> Jesse Holmes <span class="font-xs float-right">Today</span></div>
          <li class="list-group-item status status-warning">
            <div><strong>BackboneJS</strong></div>
            <div class="text-muted font-sm w-100"> Greg Abraham <span class="font-xs float-right">Yesterday</span></div>
          </li>
          <li class="list-group-item status status-primary active">
            <div><strong>EmberJS</strong></div>
            <div class="text-muted font-sm w-100"> Walter White <span class="font-xs float-right">Tuesday</span></div>
          </li>
          <li class="list-group-item status status-default">
            <div><strong>KnockoutJS</strong></div>
            <div class="text-muted font-sm w-100"> Walter White <span class="font-xs float-right">Tuesday</span></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">Bootstrap list</div>
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in <span class="badge">14</span></li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">Bootstrap list selected & disabled</div>
      <div class="list-group">
        <li class="list-group-item active"> Cras justo odio </li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item disabled">Porta ac consectetur ac</li>
        <li class="list-group-item ">Vestibulum at eros</li>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">Bootstrap list custom</div>
      <div class="list-group">
        <li class="list-group-item ">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <div class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</div>
        </li>
        <li class="list-group-item active">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <div class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</div>
        </li>
        <li class="list-group-item">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <div class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</div>
        </li>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">Bootstrap list with gap</div>
      <ul class="list-group list-group-gap">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in <span class="badge">14</span></li>
        <li class="list-group-item active">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">Bootstrap list with gap & border</div>
      <ul class="list-group list-group-gap">
        <li class="list-group-item b-success">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in <span class="badge">14</span></li>
        <li class="list-group-item b-warning">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item b-danger">Vestibulum at eros</li>
      </ul>
    </div>
    <div class="col-md-4 mb-3">
      <div class="mb-3px ml-2">Bootstrap list with small gap</div>
      <ul class="list-group list-group-gap list-group-sm">
        <li class="list-group-item ">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in <span class="badge">14</span></li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
        <li class="list-group-item b-success">Porta ac consectetur ac</li>
      </ul>
    </div>

    <div class="col-md-6">
      <div class="media">
        <a class="media-left float-left">
          <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-2">
        </a>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          Cras sit amet nibh libero, in gravida nulla. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          <div class="media">
            <a class="media-left float-left">
              <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-2">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
              purus odio, vestibulum in vulputate at, tempus viverra turpis. Donec lacinia congue felis in faucibus.
            </div>
          </div>
        </div>
      </div>
      <div class="media">
        <a class="float-left">
          <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-2">
        </a>
        <div class="media-body">
          <h4 class="media-heading">Deprecated ml-auto float-left example</h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
          purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card pb-3">
        <a class="d-flex pt-2 px-3">
          <img src="/static/img/avatar4.jpg" class="rounded-circle thumb mr-3">
          <div class="grow bb-eee pb-2">
            <div>Jonh sall</div>
            <div class="text-muted">designer</div>
          </div>
        </a>
        <a class="d-flex pt-2 px-3">
          <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-3">
          <div class="grow bb-eee pb-2">
            <div>Buk Jon</div>
            <div class="text-muted">ux developer</div>
          </div>
        </a>
        <a class="d-flex pt-2 px-3">
          <img src="/static/img/avatar4.jpg" class="rounded-circle thumb mr-3">
          <div class="grow bb-eee pb-2">
            <div>Tide Humor</div>
            <div class="text-muted">programmer</div>
          </div>
        </a>
        <a class="d-flex pt-2 px-3">
          <img src="/static/img/avatar5.jpg" class="rounded-circle thumb mr-3">
          <div class="grow bb-eee pb-2">
            <div>Steve Gate</div>
            <div class="text-muted">js ninja</div>
          </div>
        </a>
        <a class="d-flex pt-2 px-3">
          <img src="/static/img/avatar4.jpg" class="rounded-circle thumb mr-3">
          <div class="grow bb-eee pb-2">
            <div>Suppo Hugo</div>
            <div class="text-muted">script kiddie</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card pb-3">
        <a class="d-flex pt-2 px-3">
          <span class="mr-3 img rounded bg-success text-white"> <i class="fa fa-envelope"></i> </span>
          <div class="grow bb-eee pb-2">
            <div>Jonh sall</div>
            <div class="text-muted">designer</div>
          </div>
        </a>
        <a class="d-flex pt-2 px-3">
          <span class="mr-3 img rounded bg-info text-white"> <i class="fa fa-globe"></i> </span>
          <div class="grow bb-eee pb-2">
            <div>Buk Jon</div>
            <div class="text-muted">ux developer</div>
          </div>
        </a>
        <a class="d-flex pt-2 px-3">
          <span class="mr-3 img rounded bg-danger text-white font-weight-bold">T</span>
          <div class="grow bb-eee pb-2">
            <div>Tide Humor</div>
            <div class="text-muted">programmer</div>
          </div>
        </a>
        <a class="d-flex pt-2 px-3"> <span class="mr-3 img rounded bg-danger text-white font-weight-bold">S</span>
          <div class="grow bb-eee pb-2">
            <div>Steve Gate</div>
            <div class="text-muted">js ninja</div>
          </div>
        </a>
        <a class="d-flex pt-2 px-3"><span class="mr-3 img rounded bg-dark text-white font-weight-bold">H</span>
          <div class="grow bb-eee pb-2">
            <div>Suppo Hugo</div>
            <div class="text-muted">script kiddie</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
